<template>
    <div>
        <Banner :bannersData="banners">
            <li v-for="item in banners " :key="item.bannerId ">
                <a href=""><img :src="item.pic" alt=""></a>
            </li>
        </Banner>
        <vtitle>推荐歌单</vtitle>
        <personalized>
            <li v-for="(value,index) in recSongListData" :key="index">
                <img :src="value.picUrl" alt="">
                <p>{{value.name}}</p>
            </li>
        </personalized>
        <vtitle>最新音乐</vtitle>
        <latest-music>
            <li v-for="value in latestMusicData" :key="value.id" @click="selectItem(value.id)">
                <div class="play-icon"></div>

                <div class="songItem">
                    <!-- 歌手图片 -->
                    <div class="songImg">
                        <img v-lazy="value.picUrl" alt="">
                    </div>

                    <!-- 歌曲信息 -->
                    <div class="songInfo">

                        <div class="songTitle">
                            <p>{{value.name}}</p> <span>{{value.song.alias[0]}}</span>
                        </div>

                        <div class="singer">
                            <p>{{value.song.album.name}}</p>
                        </div>

                    </div>
                </div>
            </li>
        </latest-music>
        <vfooter></vfooter>

    </div>
</template>

<script>
import Banner from '../Banner/Banner'
import personalized from '../personalized/personalized'
import vtitle from '../vtitle/vtitle'
import vfooter from '../vfooter/vfooter'
import latestMusic from '../latestMusic/latestMusic'
import {mapMutations} from 'vuex'
// mapMutationsState 会被一起导入  所以用花括号
export default {
    data () {
      return {
          bannerURL:'http://localhost:3000/banner?type=1',
          recSongList:'http://localhost:3000/personalized?limit=6',
          latestMusicURL:'http://localhost:3000/personalized/newsong',
          banners:[],//轮播图数据
          songListL:[],
          latestMusic:[],
          recSongListData:[],//推荐歌单数据
          latestMusicData:[],//最新音乐数据
      }
    },


    created(){
        this.axios.all([this.getBanner(), this.getSongList(), this.getLatestMusic()])
        .then(
            this.axios.spread(  (bannerData,SongListData,latestMusicData)=> { 
            this.banners = bannerData.data.banners;
            // console.log(bannerData); // 0~8
            this.recSongListData = SongListData.data.result;  //推荐歌单数据赋值
               // console.log(SongListData);
               // 0~5
                this.latestMusicData=latestMusicData.data.result//最新音乐赋值
                console.log(latestMusicData);
         } ))
    },

    methods: {   //主要存放业务逻辑代码
        getBanner(){
            return this.axios.get(this.bannerURL)
        },
        getSongList(){
            return this.axios.get(this.recSongList)
        },
        getLatestMusic(){
            return this.axios.get(this.latestMusicURL)
        },
        selectItem(sid){
            // this.$router.push(location) 来修改 url，完成跳转
            // 字符串this.$router.push('/home/first')/
            // 对象 this.$router.push({ path: '/home/first' })
            // 命名的路由   this.$router.push({ name: 'home', params: { userId: wise }})
           // console.log(this.$store);

            // console.log(this.$router.push('/play'));
            // 最终目的存入id到state里面，下个页面可以取到这个id值，用来播放音乐
            //  this.$store就是vuex的共享数据仓库
            // this.$store.state.id+=1//这个方法不推荐,不能直接修改state,要借助mutations
            // this.$store.commit('add',2)//通过commit方法来提交修改
            console.log(this.$store.state.ID);

            // this.$store.commit('SAVEID',sid);
            this.SAVEID(sid);
            this.$router.push('/play') //跳转到play
        },
        //mapMutaions 映射出vuex里面的方法
        //映射出vue方法后，当做methods里面的方法直接使用

        ...mapMutations(['SAVEID'])
    },

    components: {
        Banner,
        personalized,
        vtitle,
        vfooter,
        latestMusic
    },
    computed:{  ///计算属性  return必须有
        listSinger(){
            let str=``
            //这个value要从哪里来
            value.forEach( item=>{
                str+=`${item.name}-`
            } )
            return str
        }
    }
}
</script>

<style scoped>
</style>